<!--登录权限判断在main.js-->
<template>
	<view class="login">
		<swiper vertical="true" style="height: 100vh;">
			<swiper-item>
				<scroll-view>
					<view class="login-tel">
						<view class="tel-main">
							<view class="logo">
								<image class="logo-img" src="../../static/logoall3.png" mode=""></image>
							</view>
							<view class="tel" @tap='gologintel'>手机号注册</view>
							<LoginOther></LoginOther>
							<view class="login-go">
								<view>已有账号,滑动至下页登录>>>

								</view>
								<image src="../../static/xia.jpg" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!--图片-->
			<swiper-item>
				<scroll-view>
					<view class="login-tel">
						<view class="tel-main">
							<view class="login-go">
								<image src="../../static/shang.jpg" mode=""></image>
								<view>没有账号,滑动至上页注册>>></view>
							</view>
							<view></view>
							<view class="login-form">

								<view class="login-user">
									<text class="user-text">账号:</text>
									<input type="text" v-model="userName" value="" placeholder="请输入11位有效手机号">
								</view>

								<view class="login-user">

									<text class="user-text">密码:</text>
									<input :type="showPwd ? 'text' : 'password'" v-model="userPwd" value=""
										placeholder="请输入密码" class="no-border">
									<view class="show-pwd" @tap="toggleShowPwd">{{ showPwd ? '隐藏密码' : '显示密码' }}</view>

								</view>


							</view>


							<view class="login-quick">

								<!---->
								<view></view>
								<view @click="goto('/pages/forgetcode/forgetcode')">忘记密码</view>
							</view>
							<view class="content1">
								<view class="tel1 tel-left" @tap='submit'>用户登录</view>
								<view class="tel1" @tap='riderSubmit'>骑手登录</view>
							</view>

							<!--<view class="reminder">温馨提示</view>-->
							<LoginOther></LoginOther><!--引入comnents的otherlogin组件-->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	import {
		mapMutations
	} from 'vuex';
	import $http from '@/common/api/request.js' //引入request组件
	import LoginOther from '@/components/login/login-ohter.vue' //插入封装的组件（components>login>login-other.vue)
	import Tabbar from '../../components/common/Tabbar.vue'
	import {
		mapState
	} from 'vuex';


	export default {
		data() {
			return {
				//用户输入的内容

				userName: '',
				token: '',
				user: [],
				userId: '',
				type: "login",
				userPwd: "",
				showPwd: false, // 控制密码显示或隐藏
				//验证的规则
				rules: {
					userName: {
						rule: /^1[3456789]\d{9}$/,
						msg: "请填写11位有效手机账号"
					},
					userPwd: {
						rule: /^[0-9a-zA-z]{6,16}$/,
						msg: "密码应该为6-16位字符"
					}
				},

			}
		},

		components: {
			LoginOther //封装方法
		},

		computed: {
			...mapMutations({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		mounted() {
			// this.submit();
		},
		methods: {
			...mapState(['loginIng']),

			back() { //回退
				uni.navigateBack({
					delta: 1
				})
			},

			save() {
				// 保存用户信息逻辑
			},
			//骑手登录
			riderSubmit() {
				if (!this.validate('userName')) return;
				if (!this.validate('userPwd')) return;
				if (!this.validate('userName')) return;

				let params = {
					phone: this.userName,
					password: this.userPwd,
					type: this.type
				};
				OrderApi.goLogin(params).then(res => {

					console.log('加入成功', res)
					if (res.data.code === 2005) {
						uni.showToast({
							title: '密码错误',
							icon: 'none'
						});
					}
					if (res.data.code === 2001) {
						uni.showToast({
							title: '用户不存在',
							icon: 'none'
						});
					}
					if (res.data.map.user.departmentId != 5) {
						uni.showToast({
							title: '您还不是骑手，联系管理员注册',
							icon: 'none'
						});
					} else {

						this.user = res.data.map.user;
						this.userId = res.data.map.user.id;
						console.log('打印用户', this.user);
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1000
						});

						uni.setStorageSync('userId', this.userId);
						uni.setStorageSync('user', this.user);
						uni.setStorageSync('token', this.token);


						setTimeout(() => {
							uni.navigateTo({
								url: '../invite/invite'
							});
						}, 1000);
					}
				})

				// uni.request({
				// 	url: 'http://43.136.172.73/api/v1/auth/login',
				// 	method: 'POST',
				// 	data: requestData,
				// 	header: {
				// 		'Authorization': 'sfsdf',
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data); // 打印接收到的后端返回的信息





				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: '登录失败',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
			},



			//普通用户登录
			submit() {
				if (!this.validate('userName')) return;
				if (!this.validate('userPwd')) return;
				if (!this.validate('userName')) return;

				let params = {
					phone: this.userName,
					password: this.userPwd,
					type: this.type
				};
				OrderApi.goLogin(params).then(res => {

					console.log('加入成功', res)
					if (res.data.code === 2005) {
						uni.showToast({
							title: '密码错误',
							icon: 'none'
						});
					}
					if (res.data.code === 2001) {
						uni.showToast({
							title: '用户不存在',
							icon: 'none'
						});
					} else {

						this.user = res.data.map.user;
						this.userId = res.data.map.user.id;
						console.log('打印用户', this.user);
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1000
						});

						uni.setStorageSync('userId', this.userId);
						uni.setStorageSync('user', this.user);
						uni.setStorageSync('token', this.token);


						setTimeout(() => {
							uni.navigateTo({
								url: '../index/index'
							});
						}, 1000);
					}
				})
				// if (!this.validate('userName')) return;
				// if (!this.validate('userPwd')) return;
				// if (!this.validate('userName')) return;

				// let requestData = {
				// 	phone: this.userName,
				// 	password: this.userPwd,
				// 	type: this.type
				// };

				// uni.request({
				// 	url: 'http://43.136.172.73/api/v1/auth/login',
				// 	method: 'POST',
				// 	data: requestData,
				// 	header: {
				// 		'Authorization': 'sfsdf',
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data); // 打印接收到的后端返回的信息

				// 		if (res.data.code === 2005) {
				// 			uni.showToast({
				// 				title: '密码错误',
				// 				icon: 'none'
				// 			});
				// 		}

				// 		if (res.data.code === 2001) {
				// 			uni.showToast({
				// 				title: '用户不存在',
				// 				icon: 'none'
				// 			});
				// 		} else {

				// 			this.user = res.data.map.user;
				// 			this.userId = res.data.map.user.id;
				// 			console.log('打印用户', this.user);
				// 			uni.showToast({
				// 				title: '登录成功',
				// 				icon: 'none',
				// 				duration: 1000
				// 			});

				// 			uni.setStorageSync('userId', this.userId);
				// 			uni.setStorageSync('user', this.user);


				// 			setTimeout(() => {
				// 				uni.navigateTo({
				// 					url: '../index/index?userId=' + this.userId
				// 				});
				// 			}, 1000);
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: '登录失败',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
			},

			//点击登录,和后端连上了要把login删掉，把submit打开 
			// submit(){	
			// 	if( !this.validate('userName')) return;
			// 	if( !this.validate('userPwd')) return;
			// 	uni.showLoading({
			// 		title:"登录中......",

			// 	}),
			// 	this.loginIng();
			// 	uni.reLaunch({
			// 	 			  url:"../index/index"
			// 	})  ,

			/*uni.request({
				url:"/auth/login",
				//url:"/commodity/list",
				method:"",
				data:{
					phone:this.userName,//给后端的东西，冒号前面要和后端的保持一致
					password:this.userPwd
				}
			}).then((res)=>{
				console.log(res)
				//保存用户信息
				this.login(res.data);//后端传给我的data，一个值
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
					uni.hideLoading();
					uni.navigateBack({
					delta:1
					})
			}).catch(()=>{
				uni.showToast({
					title:'请求失败',
					icon:'none'
				})
			})	*/

			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					console.log(this.rules[key].rule.test(this.key));
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return false;
				}
				return bool;
			},
			toggleShowPwd() { // 切换密码显示
				this.showPwd = !this.showPwd;
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			gologintel() {
				uni.navigateTo({
					url: "../login-tel/login-tel"
				})
			}



		},
	}
</script>
<style scoped>
	.login-tel {
		padding: 30rpx;
		width: 100vw;
		height: 100vh;
	}

	.tel-main {
		padding: 0, 20rpx;
	}

	.logo {
		padding-top: 150rpx;
		padding-bottom: 120rpx;
		display: flex;
		justify-content: center;
	}

	.content1 {
		display: flex;
		justify-content: space-between;
		margin: 0 60rpx;
		margin-bottom: 4 20rpx;
	}

	.tel-left {
		margin-right: 20rpx;
	}

	.tel1 {

		height: 90rpx;
		width: 240rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFF;
		background-color: #49BDFB;
		border-radius: 40rpx;
		font-weight: bold;
	}


	.tel {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFF;
		background-color: #49BDFB;
		border-radius: 40rpx;
	}


	.login-go {
		color: darkgray;
		padding-top: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-go image {
		width: 90rpx;
		height: 90rpx;
	}

	.login-form {

		padding-top: 150rpx;


	}

	.login-user {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		text-align: left;
		color: black;
		background-color: #f7f7f7;
		border-radius: 40rpx;
		margin: 40rpx 0rpx;

		border-bottom: 2rpx solid #f7f7f7;
	}

	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 33rpx;
		text-align: center;
		align-items: center;
		color: black;
		font-weight: 400;
	}

	.show-pwd {
		position: absolute;
		right: 50rpx;
		color: #49BDFB;
		padding-top: 10rpx;
		padding-bottom: 10rpx;

		cursor: pointer;

	}

	.no-border {
		outline: none;
		border: none;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.login-quick {
		display: flex;
		justify-content: end;
		padding: 10rpx 0;
		padding-bottom: 50rpx;
	}

	.reminder {
		color: darkgray;
		padding-top: 30rpx;
		text-align: center;
	}

	//按钮
	.btn {
		margin-left: -20rpx;
		margin-right: -20rpx;
		padding: 50rpx;

	}

	//版心
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100vh;
	}

	//按钮
</style>